<template>
	<view class="Step_two">
		<view class="top">
			<image :src="query.rx_identity_image ? query.rx_identity_image:$IMG_URL('/static/newVersion/front1.png')"
				mode="aspectFill" class="front" @tap.stop="uploadfront1"></image>
			<image :src="query.gh_identity_image ? query.gh_identity_image:$IMG_URL('/static/newVersion/front2.png')"
				mode="aspectFill" class="front" @tap.stop="uploadfront2"></image>
		</view>
		<StepInput :title="'身份证号'" class="mb">
			<u-input v-model="query.identity" type="text" :border="false" :clearable="false" input-align="right" placeholder="请填写身份证号" @input="changeIdentity"/>
		</StepInput>
		<StepInput :title="'真实姓名'" class="mb">
			<u-input  v-model="query.name"  type="text" :border="false" :clearable="false" input-align="right" placeholder="请填写真实姓名" @input="changeName"/>
		</StepInput>
		<StepInput :title="'性别'" class="mb">
			<u-input :value="findSex(sexList, query.gender)" type="text" :border="false" :clearable="false"
				input-align="right" disabled @click.stop="changeSexShow" placeholder="请填写性别" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput>
		<StepInput :title="'出生日期'">
			<u-input v-model="query.birthday" type="text" :border="false" input-align="right" placeholder="请选择出生日期"
				class="input_cs" disabled :clearable="false" @click.stop="birthShow" />
			<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icon"></image>
		</StepInput>
	</view>
</template>

<script>
	import StepInput from './StepInput.vue'

	export default {
		components: {
			StepInput
		},
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
			sexList: {
				type: Array,
				default: [],
				required: true
			},
		},
		methods: {
			findSex(list, data) {
				return list[data]
			},
			birthShow() {
				console.log('birthShow');
				this.$emit('birthShow')
			},
			changeSexShow() {
				this.$emit('changeSexShow')
			},
			uploadfront1() {
				this.$emit('uploadfront', 'uploadfront1')
			},
			uploadfront2() {
				this.$emit('uploadfront', 'uploadfront2')
			},
			changeIdentity(e){
				this.$emit('changeIdentity', e)
			},
			changeName(e){
				this.$emit('changeName', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mb {
		margin-bottom: 48rpx;
	}

	.icon {
		width: 10rpx;
		height: 16rpx;
		margin-left: 8rpx;
	}

	.Step_two {
		margin-top: 24rpx;
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 48rpx;

			.front {
				width: 302rpx;
				height: 204rpx;
			}
		}
	}
</style>